<template>
	<image src="../../static/image/12.png" mode="widthFix" class="bg"></image>
	<u-navbar
	title="订单详情"
	:autoBack="true"
	:background="{
	background:'transparent'
	}"
	:border-bottom="false"
	titleSize="28rpx" titleColor="#333"
	back-icon-color="#333"
	:isFixed="false"
	/>
	
	<view v-if="order">
		<view class="container">
			<view class="card">
				<image src="../../static/image/13.png" mode="widthFix" class="img"></image>
				<view class="content cf" >
					<view class="f36 bold">
						总课程：{{order.orderGoodsInfo.length}}节
					</view>
					<view class=" mt10">
						剩余课程：{{order.orderGoodsInfo.filter(item=>item.is_hx==0).length}}节
					</view>
				</view>
			</view>
				
			
			
			<view class="bgf p30 r20 mt20">
				<view class="goods t-flex between">
					<uv-image :src="$str.img(order.lastOrder.image)" mode="aspectFill"
					width="200rpx"
					height="160rpx"
					radius="20rpx"
					></uv-image>
					<view class="right">
						<view class="f32 c3 bold">
							{{order.lastOrder.good_name}}{{order.lastOrder.good_title}}
						</view>
						<view class="mt30">
							<text class="prc f32 bold">￥{{order.lastOrder.price}}</text> <text class="mprc ml20 bold">￥{{order.lastOrder.marketPrice}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="bgf r10 p30 t-flex between select mt20" @click="booking">
				<view class="c3">
					预约时间
				</view>
				<view class="right c9 t-flex">
					<view :class="form?'c3':'c9'">
						{{form?form.str:'请选择'}}
					</view>
					<text class="iconfont icon-sanjiaoxia ml10"></text>
				</view>
			</view>
			
			
			<view class="tips mt20 pt20 pb20 pl30 pr30" v-if="hasbooking">
				已预约课程，可更改预约时间
			</view>
			
			<view class="bgf p30 r20 mt20" v-if="order.orderGoodsInfo.filter(item=>item.yy_time_id).length">
				<view class="f32 c3 bold">
					预约记录
				</view>
				<view class="item p30 r10 mt20" v-for="item in order.orderGoodsInfo.filter(item=>item.yy_time_id)" :key="item.id">
					<view class="t-flex between mb20">
						<view class="c6">
							服务教练：
						</view>
						<view class="c3">
							{{item.sf_nickname}}
						</view>
					</view>
					<view class="t-flex between mb20">
						<view class="c6">
							服务时间：
						</view>
						<view class="c3">
							{{item.yy_time}}
						</view>
					</view>
					<view class="t-flex between">
						<view class="c6">
							状态：
						</view>
						<view class="c3 status">
							{{item.is_hx?'已完成':"待核销"}}
						</view>
					</view>
				</view>
				
				
			</view>
			
			
		
		</view>
		<view class="bpad"></view>
		
		<view class="bottom t-flex center safeArea bgf">
			<view class="bottomcontent t-flex center">
				<view class="btn t-flex center s1" 
				@click="$go(`/pages/worker/list?car_type_dl_id=${order.orderInfo.car_type_dl_id}&car_type_id=${order.orderInfo.car_type_id}`)">
					申请换师傅
				</view>
				<view class="btn t-flex center s2" @click="submit">
					提交
				</view>
			</view>
		</view>
	</view>
	<loading v-else></loading>


	
	
	<pushRequest ref="pushRequestE"></pushRequest>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad,onUnload } from "@dcloudio/uni-app"
import { orderDetail, setPlSf, setYyTime } from '../../api';
import { getMarketPrice, routeFn, showToast } from '../../lib/ts/util';

	
	const pushRequestE = ref()
	onLoad(options=>{
		getdata(options.id)
	})
	onUnload(()=>{
		uni.$off('bookingTimeConfirm')
		uni.$off('chooseWorker')
	})
	uni.$on('bookingTimeConfirm',(e)=>{
		form.value = e
	})
	//更换师傅
	uni.$on('chooseWorker', async (e)=>{ 
		if(e.user_id == order.value.orderInfo.sf_user_id){
			showToast(`当前师傅已是${e.name}，无需更换`)
		}else{
			let res = await setPlSf({
				user_id:e.user_id,
				order_detail_id:order.value.lastOrder.id
			})
			showToast(res.msg)
			getdata(order.value.orderInfo.id)
			uni.$emit('updateOrderList')
		}
	})
	
	
	let hasbooking =  ref(false)
	let form = ref()
	let order = ref()
	const getdata = async (id:number)=>{
		let res = await orderDetail(id)
		res.marketPriceList = getMarketPrice(res.orderGoodsInfo.map(item=> +item.price),+JSON.parse(res.orderInfo.shippingfee).xm_price,+res.orderInfo.good_info.marketprice)
		res.orderGoodsInfo.forEach((item,index)=>{
			item.marketPrice = res.marketPriceList[index]
		})
		let last = res.orderGoodsInfo.filter(item=>!item.is_hx)
		if(last.length){
			res.lastOrder = last[0]
			if(last[0].yy_time_id){
				hasbooking.value = true
				form.value = {
					s_time:last[0].yy_s_time,
					e_time:last[0].yy_e_time,
					str:last[0].yy_time,
					time_id:last[0].yy_time_id,
				}
			}
			order.value = res
		}else{
			uni.showModal({
				title:'提示',
				content:'已无可预约课程'
			})
		}
	}
	

	
	const booking = ()=>{
		if(order.value.orderInfo.sf_user_id){
			uni.navigateTo({
				url:`/pages/booking/booking?id=${order.value.orderInfo.sf_user_id}&time=${encodeURIComponent(JSON.stringify(form.value))}`
			})
		}else{
			showToast('还未安排师傅接单')
		}
	}
	
	
	const submit = async ()=>{
		if(form.value){
			let res = await setYyTime({...form.value,order_detail_id:order.value.lastOrder.id})
			uni.$emit('updateOrderList')
			getserverPush()
			showToast(res.msg)
			getdata(order.value.orderInfo.id)
		}else{
			showToast('请选择预约时间')
		}
	}
	
	//获取服务通知
	const getserverPush = ()=>{
		let codeArr = ['HxqU5vgOoED-EenJFTwvzTnjLN1sOFx8gOUgP55oaeQ']
		//如果用户取消了授权提示，直接退出
		if(uni.getStorageSync('noPop_type1') && uni.getStorageSync('noPop_type1') == 1){
			return
		}
		wx.getSetting({
			withSubscriptions: true,
			success(res) {
				//首次进入
				if(!res.subscriptionsSetting.itemSettings){
					let str = '用于接收用户预约提醒'
					pushRequestE.value.msgType = codeArr
					pushRequestE.value.text = str
					pushRequestE.value.count = 0
					pushRequestE.value.show2 = true
				}else{
					console.log(res,'后续进入')
					let settings = res.subscriptionsSetting.itemSettings
					let arr = []   //需要授权的消息数组
					let str = '用于接收用户预约提醒'  //提示消息
					for(let k in settings){
						if(settings[k] != 'accept'){
							arr.push(k)  //如果有没有授权的，添加进需要被授权的数组
						}
					}
					
					if(arr.length != 0){ //当有未授权的消息时
						pushRequestE.value.msgType = arr
						pushRequestE.value.text = str
						pushRequestE.value.count = 1
						pushRequestE.value.show2 = true
						
					}else if(!res.subscriptionsSetting.mainSwitch){ //当授权了所有消息但总开关没开时
							pushRequestE.value.msgType = codeArr
							pushRequestE.value.text = '已授权订阅消息但未打开总开关'
							pushRequestE.value.count = 1
							pushRequestE.value.show2 = true
					}else{
						console.log('完成授权')
					}
				}
				
				
			},
			fail(res) {
			}
		})
	}
	

</script>

<style scoped lang="scss">
	.bg{
		width: 100%;
		position: absolute;
	}
	.container{
		padding: 40rpx 30rpx;
		position: relative;
		z-index: 2;
	}
	
	.card{
		position: relative;
		.img{
			width: 100%;
		}
		.content{
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
			padding: 0 30rpx;
			padding-top: 36rpx;
			.right{
				border-radius: 200rpx;
				height: 70rpx;
				width: 160rpx;
			}
		}
	}
	
	
	.goods{
		.right{
			width: calc(100% - 230rpx);
			.prc{
				color: #FF1616;
			}
			.mprc{
				color: #BBBBBB;
				text-decoration: line-through;
			}
		}
	}
	
	.tright{
		text-align: right;
	}
	
	.bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-shadow: inset 0rpx 2rpx 0rpx 0rpx #EDEDED;
		.bottomcontent{
			justify-content: flex-end;
			padding: 24rpx 30rpx;
			width: 100%;
			.btn{
				width: 330rpx;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 40rpx;
				box-sizing: border-box;
				margin-left: 24rpx;
			}
			.s1{
				background: $main-color-opcity1;
				color: $main-color;
			}
			.s2{
				background-color: $main-color;
				color: #fff;
			}
		}
	}
	
	.item{
		background: #FAFAFA;
		.status{
			color: #FF7700;
		}
	}

	
	.select{
		.right{
			width: 70%;
			text-align: right;
			justify-content: flex-end;
		}
	}
	
	.tips{
		color: #FF9C16;
		font-size: 24rpx;
		background-color: #FFF5E8;
		border-radius: 8rpx;
		text-align: center;
	}
	
</style>
